<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://struts.apache.org/tags-nested" prefix="nested"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html:html>
<jsp:include page="/jsp/head.jsp"/>
<body>
<html:form action="Rodamiento" styleId="rodamientoForm">
<html:hidden property="accion" styleId="accion" />
<html:hidden property="cantFilas" styleId="cantFilas"/>
	<div id="wrapper">
	<jsp:include page="/jsp/headerRodamiento.jsp"/>
	<div id="page-wrapper">
		<div id="page">
			<div id="wide-content">
					
					
					<table width="100%" align="center">
						<tr>
							<td class="titulos" colspan="2" align="center"><h2><bean:message key="alta.rodamiento.titulo"/></h2></td>
						</tr>
						<tr>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td  align="center">
							<table align="center" border="1" bordercolor="black" cellspacing="0" >
								<tr>
									<td>
				
									<table >
										<tbody id="idtbody">
											<tr>
												<td class="titulo_tabla"><h3><bean:message key="alta.rodamiento.codigo"/></h3></td>
												<td><html:text styleId="codigoRodamiento" property="codigoRodamiento" onchange="this.value = jQuery.trim(this.value);" size="60" maxlength="60" /></td>
											</tr>
											<tr>
												<td class="titulo_tabla"><h3><bean:message key="alta.rodamiento.caracteristica"/></h3></td>
												<td><html:text styleId="caracteristica" property="caracteristica" onchange="this.value = jQuery.trim(this.value);" size="60" maxlength="60" /></td>
											</tr>
											<tr>
												<td class="titulo_tabla"><h3><bean:message key="alta.rodamiento.marca"/></h3></td>
												<td><html:text styleId="marca" property="marca" onchange="this.value = jQuery.trim(this.value);" size="60" maxlength="60" /></td>
											</tr>
											<tr>
												<td class="titulo_tabla"><h3><bean:message key="alta.rodamiento.origen"/></h3></td>
												<td><html:text styleId="origen" property="origen" onchange="this.value = jQuery.trim(this.value);" size="60" maxlength="60" /></td>
											</tr>
											<tr>
												<td class="titulo_tabla"><h3><bean:message key="alta.rodamiento.tipo"/></h3></td>
												<td><html:text styleId="tipo" property="tipo" onchange="this.value = jQuery.trim(this.value);" size="60" maxlength="60" /></td>
											</tr>
											<tr>
												<td class="titulo_tabla"><h3><bean:message key="alta.rodamiento.precio"/></h3></td>
												<td><html:text styleId="precio" property="precio" onchange="this.value = jQuery.trim(this.value);" size="60" maxlength="60" /></td>
											</tr>
											<tr>
												<td>&nbsp;</td>
											</tr>
											<tr>
												<td valign="top" class="subtitulo_tabla" colspan="2"><h3><bean:message key="alta.rodamiento.materia.prima.titulo"/></h3></td>
											</tr>
											<tr>
												<td valign="top" colspan="2">
													<table id="tablaParametros"  align="center" >
														<thead>
															<tr align="center">
																<td class="titulo_tabla" nowrap="nowrap"><h3><bean:message key="alta.rodamiento.materia.prima.codigo"/></h3></td>
																<td class="titulo_tabla" colspan="2" nowrap="nowrap"><h3><bean:message key="alta.rodamiento.materia.prima.cantidad"/></h3></td>
															</tr>
														</thead>
														<tbody id="bodyParametros" align="center">
															<tr id="1" align="center">
																<td>
																	<input type="hidden" name="descMateriaPrima1" id="descMateriaPrima1"/>
																	<select id="codMateriaPrima1" name="codMateriaPrima1" onchange="setDescripcion(this);">
																	<option value=""></option>
																	<logic:iterate id="materiaPrima" property="listaMateriasPrima" name="rodamientoForm">
																		<option value="<bean:write property="codigo" name="materiaPrima" />"><bean:write property="descripcion" name="materiaPrima" /></option>
																	</logic:iterate>
																	</select>
																</td>
																<td><input type="text" id="cantidadMateriaPrima1" name="cantidadMateriaPrima1" maxlength="40" onkeypress="fOnlyN(event)"/></td>
															</tr>	
														</tbody>
													</table>
												</td>
											</tr>
											<tr>
												<td colspan="2" height="6" align="right"><img title="<bean:message key="alta.rodamiento.boton.agregar.materia.prima"/>" src="images/add.png" id="add" onclick="agregarParametro();" style="cursor: pointer;"/></td>
											</tr>
										</tbody>
									</table>
									</td>
								</tr>
							</table>
							<table align="center">
				
								<tr>
									<td align="center">
				
									<div align="center">
									<TABLE align="center">
										<tr>
											<td align="center">
												<INPUT type="button" value="<bean:message key="alta.rodamiento.boton.aceptar"/>" onclick="aceptar();">
											</td>
										</tr>
									</TABLE>
									</div>
									
									</td>
								</tr>
							</table>
							</td>
						</tr>
						<tr><td>&nbsp;</td></tr>
					</table>
			</div>
		</div>
	</div>
	<jsp:include page="/jsp/footer.jsp"/>
	</div>
<script type="text/javascript">
var fila = jQuery("#1").clone();

function setDescripcion(obj){
	var id = jQuery(obj).attr("id");
	var id2 = id.substr(id.length - 1, id.length);
	var seleccionada = jQuery("#"+id+" option:selected").text();
	jQuery("#descMateriaPrima"+id2).val(seleccionada);
	
}

function agregarParametro() {
	var newFila = jQuery(fila).clone();
	var idNew = jQuery('#bodyParametros > tr:last').attr("id");
	idNew = Number(idNew) + 1;

	jQuery(newFila).attr("id", idNew);

	jQuery(newFila).find(":input").each(function() {
		jQuery(this).attr("name",(jQuery(this).attr("name").substr(0, (jQuery(this).attr("name").length) - 1)) + idNew);
		jQuery(this).attr("id",(jQuery(this).attr("id").substr(0, (jQuery(this).attr("id").length) - 1)) + idNew);
	});
	jQuery(newFila).find("select").each(function() {
		jQuery(this).attr("name",(jQuery(this).attr("name").substr(0, (jQuery(this).attr("name").length) - 1)) + idNew);
		jQuery(this).attr("id",(jQuery(this).attr("id").substr(0, (jQuery(this).attr("id").length) - 1)) + idNew);
	});
	jQuery(newFila).find(":text").each(function() {
		jQuery(this).val("");
	});
	newFila.append('<td align="center"><img id="botonEliminar" style="cursor:pointer;" title="Eliminar Materia Prima" src="images/delete.png" onclick="eliminarParametro(this);"/></td>');
	jQuery(newFila).appendTo("#tablaParametros > tbody:last");
}

function eliminarParametro(objeto) {
	jQuery(objeto).parent().parent().remove();

}

function fOnlyN (event){
	var kCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
	if ( !(kCode>=48 && kCode<=57) && kCode!=8 && kCode!=46 && kCode!=13){
		event.returnValue = false;
		if (event.stopPropagation) {
			event.stopPropagation();
			event.preventDefault();
		}
	}
}

function aceptar(){
	var numero = jQuery('#bodyParametros > tr:last').attr("id");
	var RE = /^\d*\.?\d*$/;
	
	document.rodamientoForm.cantFilas.value = numero;
	document.rodamientoForm.accion.value = 'guardar';
	if(jQuery("#codigoRodamiento").val()==''){
		alert("<bean:message key="alta.rodamiento.codigo.vacio"/>");
		jQuery("#codigoRodamiento").focus();
		return;
	}
	if(jQuery("#caracteristica").val()==''){
		alert("<bean:message key="alta.rodamiento.caracteristica.vacio"/>");
		jQuery("#caracteristica").focus();
		return;
	}
	if(jQuery("#marca").val()==''){
		alert("<bean:message key="alta.rodamiento.marca.vacio"/>");
		jQuery("#marca").focus();
		return;
	}
	if(jQuery("#origen").val()==''){
		alert("<bean:message key="alta.rodamiento.origen.vacio"/>");
		jQuery("#origen").focus();
		return;
	}
	if(jQuery("#tipo").val()==''){
		alert("<bean:message key="alta.rodamiento.tipo.vacio"/>");
		jQuery("#tipo").focus();
		return;
	}
	if(jQuery("#precio").val()==''){
		alert("<bean:message key="alta.rodamiento.precio.vacio"/>");
		jQuery("#precio").focus();
		return;
	}else if(!RE.test(jQuery("#precio").val())){
		alert("<bean:message key="alta.rodamiento.precio.invalido"/>");
		jQuery("#precio").focus();
		return;
	}
	var ok = true;
	jQuery('select[id^="codMateriaPrima"]').each(function(){
		if(jQuery(this).val()==''){
			alert("<bean:message key="alta.rodamiento.materia.prima.codigo.vacio"/>");
			jQuery(this).focus();
			ok = false;
			return;
		}
	});
	if(ok){
		jQuery('input[id^="descMateriaPrima"]').each(function(){
			if(jQuery(this).val()==''){
				alert("<bean:message key="alta.rodamiento.materia.prima.desc.vacio"/>");
				ok = false;
				return;
			}
		});
	}
	if(ok){
		jQuery('input[id^="cantidadMateriaPrima"]').each(function(){
			if(jQuery(this).val()==''){
				alert("<bean:message key="alta.rodamiento.materia.prima.cantidad.vacio"/>");
				jQuery(this).focus();
				ok = false;
				return;
			}
		});
	}
	if(ok)
		document.rodamientoForm.submit();
}

</script>
</html:form>
</body>
</html:html>